<template>
  <div class="grandSon">
    我是GrandSon
    <!-- 3.接受完数据后 可以直接使用 -->
    <p>color:{{ color }}</p>
    <p>姓名：{{ userInfo.name }}</p>
    <p>年龄：{{ userInfo.age }}</p>
    <button @click="changeData">改变祖先组件的数据</button>
  </div>
</template>

<script>
export default {
  // 2.孙子组件通过inject配置项进行接受
  inject: ['color', 'userInfo'],
  methods: {
    // 注意：孙子组件 不可以改变inject注入的数据
    changeData() {
      this.color = 'black'
    },
  },
}
</script>

<style>
.grandSon {
  border: 3px solid #000;
  border-radius: 6px;
  margin: 10px;
  height: 100px;
}
</style>